<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-06-29 22:00:03
-->
<template>
  <div class="article_container">
    <!-- 3. 引用 -->
    <!-- 头部 -->
    <Header></Header>
    <!-- 文章内容 -->
    <div class="article">
      <div class="name">{{project.title}}</div>
      <div class="info">
      </div>

      <div class="details" v-html="project.content"></div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import {get} from '../utils/request'
  // 1. 导入
  import Header from './components/Header'
  import Footer from './components/Footer'
  export default {
    // 2. 注册
    components:{
      Header,Footer
    },
    data(){
      return {
        project :{}
      }
    },
    created(){
      // 1.获取项目id
      console.log(this.$route.query.article);
      let articleId =this.$route.query.article;
      // 2.通过项目id查询项目
      let url = "/index/article/findById"
      let param = {id:articleId}
      get(url,param).then(resp => {
        this.project = resp.data;
      })
      // 3.展示到页面中
    }
  }
</script>

<style>
  .article img {
    width: 100% !important;
    margin: .5em 0;
  }
</style>
<style lang="scss" scoped>
  .article_container {
    .article {
      width: 90%;
      margin: 20px auto;
      img {
        width: 100%;
        margin: .5em 0;
      }
      .name {
        font-weight: bolder;
        font-size: 18px;
        line-height: 2em;
        text-align: center;
      }
      .info {
        text-align: center;
      }

    }
  }
</style>